<template>
  <div class="store_hp" v-if="!isLoading" style="position:absolute;top:0px;width:100%;">
			<div class="hp_top">
			   <swiper loop auto style="width: 100%;z-index: 1;"  dots-position="center">
				 		<swiper-item class="swiper-demo-img" v-for="(item, index) in imgArray" :key="index"><img :src="item" style="width:100%;height:100%;"></swiper-item>
				 </swiper>
			</div>
			<div class="hp_middle">
				<div class="midd_name">
					<div class="name_left">
						<div>{{dataList.name}}</div>
						<div class="name_left_down">
							<div class="comm_star nine">
                <rater v-model="dataList.point" slot="value" :font-size="18" disabled>
                </rater>
              </div>
							<span class="name_down_mon">￥{{dataList.avg}}</span>
						</div>
					</div>
					<div class="name_right">
						<span v-on:click="onQcode(dataList)" v-if="dataList.orderType ==='1' ">扫码下单</span>
						<span @click="onGoods(dataList)" v-if="dataList.orderType === '2'">购买商品</span>
						<span @click="onGoods(dataList)" v-if="dataList.orderType === '3'">联系预定</span>
					</div>
				</div>
				<div class="midd_cont">
					{{dataList.description}}
				</div>
				<div class="midd_addr">
					<div class="addr_iconfont iconfont"></div>
					<div class="addr_txt">{{dataList.address}}</div>
					<!-- <div class="addr_distance">{{distance}}km</div> -->
					<a :href="'tel:'+dataList.contact" class="addr_tel iconfon"></a>
				</div>
				<div class="midd_addr middd_padding">
					<div class="time_iconfont iconfont"></div>
					<div class="time_open">营业时间：</div>
					<div class="time_det">{{dataList.openTime}}</div>
					<div class="name_right" v-if="dataList.orderType ==='1'">
						<span v-on:click="onPreview(dataList)">预览商品</span>
					</div>
				</div>
			</div>
			<div class="midd_grade">
					<div class="grade_left grade_box">{{dataList.point}}</div>
					<div class="grade_right grade_box">
						<div>综合评分</div>
						<div class="comm_star nine">
              <rater v-model="dataList.point" slot="value" :font-size="18" disabled>
              </rater>
            </div>
					</div>
			</div>
			<div class="hp_bottom" v-if="dataList.reviewInfo">
				<group>
          <cell-box is-link :link="{path:'/comment',query:{item:dataList.reviewInfo}}" style="margin-top:0rem;">
            <p style="font-size:.46rem;color:#333;">用户评价({{dataList.reviewInfo.length}})</p>
          </cell-box>
        </group>
				<div class="bott_comm_item" v-for="(item,key) in dataList.reviewInfo" :key="key">
					<img :src="item.avatar" class="item_user_pho" />
					<div class="item_right">
					<div class="item_up">
						<div class="item_user_info">
							<div class="user_name">{{item.nickname}}</div>
							<div class="comm_star eight"><rater v-model="item.star" slot="value" :font-size="18" disabled></rater></div>
						</div>
						<div class="comm_time">{{item.createTime}}</div>
					</div>
					<div class="item_cont">{{item.statement}}</div>
					<div class="item_down">
						<!-- 图片评价 -->
					</div>
					</div>
				</div>
				<div class="comm_more">
					<router-link :to="{path:'/comment',query:{item:dataList.reviewInfo}}">
						查看更多评价
					</router-link>
				</div>
			</div>
			<div class="hp_bottom" v-else>
				<group>
					<cell-box is-link style="margin-top:0rem;">
            <p style="font-size:.46rem;color:#333;">暂时没有评论</p>
          </cell-box>
        </group>
			</div>
		</div>
</template>
<script>
import { Group, CellBox, Rater, Swiper,SwiperItem} from 'vux'
import {mapActions} from 'vuex'

export default {
  components: {
    Group,
    CellBox,
    Rater,
		Swiper,
		SwiperItem
  },
  data () {
    return{
			// point: 0,
			dataList: {},
			imgArray: [require('@/assets/default.jpg')],
			// distance: '',
			isLoading: false
    }
	},
	methods: {
		...mapActions([
			'setHeaderTitle'
		]),
		// 初始商家信息
		initData(){
			var _this = this
			// 商铺id
			let id = this.$route.query.id
			// 距离
			// this.distance = this.$route.query.distance
			// 星级
			// this.point = parseFloat(this.$route.query.point)
			// 设置标题
			this.setHeaderTitle(this.$route.query.title)
			// 开始获取数据
			this.isLoading = true
			this.$http.get(`shop/${id}`)
				.then(({data})=>{
					if(data.status == 200){
						this.dataList = data.data
						if(data.data.imgArray.length >0){
							this.imgArray = data.data.imgArray
						}
						// 结束获取
						this.isLoading = false
					}else{
						_this.$vux.toast.show({
								type: 'warn',
								text: '发生错误',
								time: 2000
						})
					}
				}).catch(err=>{
					_this.$vux.toast.show({
							type: 'warn',
							text: '获取商家数据失败',
							time: 2000
					})
				})
		},
		// 扫码购买
		onQcode(item){
			var _this = this;
			// 测试代码
				// let result = 'S/PJXa4aAfYtFHhd7QZF701upOPXtW7sX0TqWfDo/gi5diL6TpZ+fLObTQT/ex1is/N872GmwI5muWc4WkX6Q9GU1nBXpf08xsItDvaJEoW8ZtGz6qne5OFIxEpv5Iq3ihhhDdYazA3GGxsyEdhRn0ZJHtTQF75fBgIlkYkzBSs=';
				//  _this.$http(`shop/qrCode/get?qrCode=${result}`)
        //     .then(({data})=>{
        //       if(data.status == 200){
				// 				// 当商户id匹配时跳转
				// 				if(data.data.shopId===_this.$route.query.id){
				// 					_this.$router.push({path:'/goods',query:{tableId:data.data.tableId,tableName:data.data.tableName,shopId:item.id,shopName:item.name,orderType:item.orderType}})
				// 				}else{
				// 					_this.$vux.toast.show({
				// 						type: 'warn',
				// 						text: '二维码跟店铺不匹配',
				// 						time: 2000
				// 					})
				// 				}
        //       }
        //     }).catch(err=>{
        //     	_this.$vux.toast.show({
        //         type: 'warn',
        //         text: '请在微信端扫码',
        //         time: 2000
        //       })
				//     })
			if(item){
				this.$wechat.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function (res) {
						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
						var reg = /(val=(.*))/ig;
						_this.$http(`shop/qrCode/get?qrCode=${result.match(reg)[0].split('val=')[1]}`)
							.then(({data})=>{
								if(data.status == 200){
									// 当商户id匹配时跳转
									if(data.data.shopId===_this.$route.query.id){
										_this.$router.push({path:'/goods',query:{tableId:data.data.tableId,tableName:data.data.tableName,shopId:_this.$route.query.id,orderType:item.orderType,contact:item.contact}})
									}else{
										_this.$vux.toast.show({
											type: 'warn',
											text: '二维码跟店铺不匹配',
											time: 2000
										})
									}
								}
							}).catch(err=>{
								_this.$vux.toast.show({
									type: 'warn',
									text: '请在微信端扫码',
									time: 2000
								})
							})
					}
				})
			}   
		},
		// 直接购买
		onGoods(item){
			// <a :href="'tel:'+dataList.contact"  v-if="dataList.orderType === '3'"><span>联系店家</span></a>
			if(item){
				this.$router.push({path:'/goods',query:{shopId:item.id,orderType:item.orderType,shopName:item.name,type:item.type,contact:item.contact}})
			}
		},
		onPreview(item){
			if(item){
				this.$router.push({path:'/preview',query:{shopId:item.id,orderType:item.orderType,shopName:item.name+'菜品预览',type:item.type,contact:item.contact}})
			}
		}
	},
  created() {
		this.initData()
  }
}
</script>
<style scoped>
.store_hp{
	width: 100%;
	background-color: #fff;
}
.hp_top{
	width: 100%;
}
.top_pho{
	width: 100%;
}
.hp_middle{
	width: 96%;
	margin-left: 4%;
}
.midd_name{
	width: 100%;
	display: -webkit-box;
	-webkit-box-align: center;
	padding: 0.3rem 0 0.4rem 0;
	border-bottom:1px solid #e5e5e5;
}
.name_left{
	-webkit-box-flex: 1;
	font-size: 0.5rem;
}
.name_left_down{
	display: -webkit-box;
	-webkit-box-align: center;
	margin-top: 0.1rem;
}
.name_down_mon{
	display: -webkit-box;
	color: #6d726d;
	font-size: 0.4rem;
	padding-left: 0.3rem;
}
.name_right{
	width: 2.6rem;
	height: 0.9rem;
	border: 1px solid #2e9670;
	background-color: #2e9670;
	border-radius: 5px;
	font-size: 0.5rem;
	display: -webkit-box;
	-webkit-box-align: center;;
	-webkit-box-pack: center;
	color: #fbfdfc;
	margin-right: 0.3rem;
}
.name_right >a{
	color: #fff;
}
.midd_cont{
	font-size: 0.41rem;
	line-height: 0.6rem;
	padding: 0.4rem 0.28rem 0.4rem 0;
	text-indent: 0.8rem;
	
}
.midd_addr{
	display: -webkit-box;
	-webkit-box-align: center;;
	font-size: 0.5rem;
	padding: 0.3rem 0;
	border-top: 1px solid #E5E5E5;
}
.middd_padding{
	padding: 0.326rem 0;
	}
.addr_txt{
	-webkit-box-flex: 1;
	color: #000;
	font-size: 0.46rem;
	font-weight: 700;
}
.addr_iconfont:before{
  font-family: 'iconfont';
	content: "\b001";
	font-size: 1.2rem;
	color: #2e9670;
	margin-right: 0.3rem;
}
.time_iconfont:before{
  font-family: 'iconfont';
	content: "\b002";
	font-size: 1rem;
	color: #2e9670;
	margin-right: 0.3rem;
	margin-left: 0.1rem;
}
.addr_distance{
	margin-right: 0.3rem;
	color: #727272;
}
.time_open{
	color: #000;
	font-size: 0.46rem;
	font-weight: 700;
}
.addr_tel{
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	width: 1.2rem;
	height: 1.2rem;
	padding: .2rem .4rem;
	border-left: 1px solid #e5e5e5;
}
.addr_tel:after{
  font-family: 'iconfont';
	content: "\b003";
	color: #2e9670;	
	font-size: 0.8rem;
}
.time_det{
	-webkit-box-flex: 1;
}
.midd_grade{
	width: 100%;
	display: -webkit-box;
	border-top: 0.3rem solid #f7f7f7;
	border-bottom: 0.3rem solid #f7f7f7;
	
}
.grade_box{
	width: 50%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	padding: 0.42rem 0;
}
	
.grade_left{
	font-size: 1.2rem;
	color: #2e9670;	
}
.grade_right{
	font-size: 0.5rem;
}
.bott_comment{
	display: -webkit-box;
	-webkit-box-align: center;
	font-size: 0.5rem;
	padding: 0.3rem 0;
	border-bottom: 1px solid #e5e5e5;
}
.comm_right{
	font-size: 0.6rem;
	margin-right: 0.24rem;
	color: #aaaaaa;
}
.comm_right:after{
  font-family: 'iconfont';
	content: "\c001";
}
.comm_left{
	-webkit-box-flex: 1;
	color: #777b77;
	padding-left: 0.4rem;
}
.comm_pho{
	width: 1.6rem;
	height: 1.6rem;
	margin: 0.1rem;
}
.comm_more{
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	font-size: 0.5rem;
	padding: 0.46rem 0;
}
</style>

